import Vue from 'vue'
/**
 * action 权限名称  
 * effect 操作  disabled/delete
 */
let permissions = []
export const permissionFn = () => {
	import('@/store').then(store=>{
		permissions = store.default.state.permissions || []
	})
}
permissionFn()

export default {
	install: function (Vue) {
		// 输入框点击后，选中文字
		Vue.directive('selectTextOnFocus', {
			bind: function (el, binding) {
				function bindDom(el) {
					if (el.tagName !== 'INPUT') {
						[...el.children].forEach(dom => {
							bindDom(dom)
						})
					} else {
						el.onfocus = function () {
							setTimeout(() => {
								el.select()
							}, 30)
						}
						return true
					}
				}

				bindDom(el)
			},
		})
		Vue.directive('drag', {

			inserted: function (el, binding) {

				const odiv = el.querySelector(".chat-dialog_head")
				const LeftDiv = document.querySelector(".chat-dialog")

				odiv.onmousedown = function (e) {
					el.style.cursor = "move";
					e.stopPropagation();
					let disx = e.pageX - LeftDiv.offsetLeft;
					let disy = e.pageY - LeftDiv.offsetTop;
					let x = e.clientX - LeftDiv.offsetLeft;
					let y = e.clientY - LeftDiv.offsetTop;
					document.onmousemove = function (e) {

						let left = e.clientX - x;
						let top = e.clientY - y;
						if (left <= 0) {
							left = 0;
						} else if (left >= document.documentElement.clientWidth - LeftDiv.offsetWidth) {
							//document.documentElement.clientWidth 屏幕的可视宽度
							left = document.documentElement.clientWidth - LeftDiv.offsetWidth;
						}

						if (top <= 0) {
							top = 0;
						} else if (top >= document.documentElement.clientHeight - LeftDiv.offsetHeight) {
							// document.documentElement.clientHeight 屏幕的可视高度
							top = document.documentElement.clientHeight - LeftDiv.offsetHeight

						}
						e.preventDefault();
						LeftDiv.style.left = left + "px";
						LeftDiv.style.top = top + "px"


						//    LeftDiv.style.left = e.pageX - disx+'px';
						//    LeftDiv.style.top = e.pageY - disy+'px';
					}
					document.onmouseup = function () {
						el.style.cursor = ''

						document.onmousemove = document.onmouseup = null;
						//binding 传参，可忽略
						if (binding && binding.value) {
							binding.value.clientX = parseInt(LeftDiv.style.left);
							binding.value.clientY = parseInt(LeftDiv.style.top);
						}

					}
				}
			},
		});

		// el-dialog 拖拽
		Vue.directive('dialogDrag', {
			bind(el, binding, vnode, oldVnode) {
				const dialogHeaderEl = el.querySelector('.el-dialog__header')
				const dragDom = el.querySelector('.el-dialog')
				dialogHeaderEl.style.cursor = 'move'
				// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
				const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
				dialogHeaderEl.onmousedown = (e) => {
					// 鼠标按下，计算当前元素距离可视区的距离
					const disX = e.clientX - dialogHeaderEl.offsetLeft
					const disY = e.clientY - dialogHeaderEl.offsetTop
					// 获取到的值带px 正则匹配替换
					let styL, styT
					// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
					if (sty.left.includes('%')) {
						styL = +document.body.clientWidth * (+sty.left.replace('%', '') / 100)
						styT = +document.body.clientHeight * (+sty.top.replace('%', '') / 100)
					} else {
						styL = +sty.left.replace(/\px/g, '')
						styT = +sty.top.replace(/\px/g, '')
					}


					document.onmousemove = function (e) {
						// 通过事件委托，计算移动的距离
						const l = e.clientX - disX
						const t = e.clientY - disY
						// 弹窗到视口边界的距离
						let pl = dialogHeaderEl.getBoundingClientRect().left
						let pt = dialogHeaderEl.getBoundingClientRect().top
						// 移动当前元素
						// if (pl > 0) dragDom.style.left = `${l + styL}px`
						// if (pt > 0) dragDom.style.top = `${t + styT}px`
						dragDom.style.left = `${l + styL}px`
						dragDom.style.top = `${t + styT}px`
						// 将此时的位置传出去
						// binding.value({x:e.pageX,y:e.pageY})
					}
					document.onmouseup = function (e) {
						document.onmousemove = null
						document.onmouseup = null
					}
				}
			}
		})
		// 自动聚焦
		Vue.directive('focus', {
			inserted: function (el, value) {
				value = value == 'undefined' ? true : value
				if (value) {
					el.focus()
				}
			},
		})
		// 防止重复提交
		Vue.directive('noMoreClick', {
			inserted(el, binding) {
				el.addEventListener('click', e => {
					let time = 3000
					let value = el.innerText
					if (Number(binding.arg) > 3000) {
						time = Number(binding.arg)
					}
					let countdown = time / 1000
					el.disabled = true
					// setTimeout(() => {
					// 	el.disabled = false
					// }, time)
					let timeLimit = setInterval(() => {
						countdown--
						// el.innerText = `${countdown} 秒后可重新点击`
						el.classList.add('BtnDisabled')
						if (countdown == 0) {
							// el.innerText = value
							el.disabled = false
							el.classList.remove("BtnDisabled");
							clearInterval(timeLimit)
						}
					}, 1000)
				})
			},
		})
		Vue.directive("watermark", (el, binding) => {
			const addWaterMarker = (text, time, el) => {
				if(!text) return
				var canvas = document.createElement("canvas");
				canvas.width = 250;
				canvas.height = 150;
				var cans = canvas.getContext("2d");
				cans.rotate((-20 * Math.PI) / 180); //旋转弧度
				cans.font = "16px Microsoft JhengHei"; //字体
				cans.fillStyle = "rgba(0, 0, 0, 0.1)"; //字体填充颜色
				cans.textAlign = "left"; //对齐方式
				cans.textBaseline = "Middle"; //基线
				cans.fillText(text, canvas.width / 3, canvas.height / 2); //被填充的文本
				cans.fillText(time, canvas.width / 3, 130); //被填充的文本
				el.style.backgroundImage = `url(${canvas.toDataURL("image/png")})`; //插入背景图
			};
			const { text, time } = binding.value;
			addWaterMarker(text, time, el);
		});

		Vue.directive('permission', {
			inserted(el, binding) {
				const action = binding.value.action
				const effect = binding.value.effect || "delete"
				if (permissions.indexOf(action) === -1) {
					if (effect === 'disabled') {
						el.disabled = true
						el.classList.add('is-disabled')
					} else {
						el.remove()
					}
				}
			}
		})
	},
}
